<template>
  <Tabs
    centered
    :size="tabSize"
    class="flowDesignerTab"
    :class="`h-full overflow-auto`"
    @change="getActiveKey"
    v-model:activeKey="actKey"
  >
    <TabPane key="1" tab="流程设计">
      <div class="flex">
        <div class="w-full overflow-auto view-style">
          <EditFlowChart
            :typeCode="currentQuery?.typeCode"
            ref="editFlowChartRef"
            @select="handleSelectItem"
            v-if="isShow"
          />
        </div>
        <div class="w-470px overflow-auto view-style pl-2">
          <Tabs
            v-model:activeKey="activeKey"
            type="card"
            @change="handleTabChange"
            :destroyInactiveTabPane="true"
          >
            <TabPane tab="流程" key="1">
              <FlowEdit :typeCode="currentQuery?.typeCode" :formCode="dataRef?.formCode" />
            </TabPane>
            <TabPane tab="属性" key="2">
              <NodeEdit
                :formCode="dataRef?.formCode"
                :typeCode="currentQuery?.typeCode"
                :isCircleReadEnabled="dataRef?.isCircleReadEnabled"
                v-if="selectType == 'rect'"
                @success="handleSuccess"
              />
              <PathEdit
                :formCode="dataRef?.formCode"
                v-if="selectType == 'path'"
                @success="handleSuccess"
              />
            </TabPane>
            <TabPane tab="回写" key="3" v-if="isWriteBackEnabled">
              <Writeback
                :typeCode="currentQuery?.typeCode"
                :formCode="dataRef?.formCode"
                @success="handleSuccess"
              />
            </TabPane>
            <TabPane tab="事件" key="4">
              <EventDesign :typeCode="currentQuery?.typeCode" :formCode="dataRef?.formCode" />
            </TabPane>
          </Tabs>
        </div>
      </div>
    </TabPane>
    <template v-if="formEditorType == 3">
      <TabPane key="2" tab="业务表单">
        <FormDesigner ref="formDesignRef" />
      </TabPane>
      <TabPane key="3" tab="专业表单">
        <UeditorFormDesigner ref="ueditorFormDesignRef" />
      </TabPane>
    </template>
    <template v-else-if="formEditorType == 2">
      <TabPane key="3" tab="专业表单">
        <UeditorFormDesigner ref="ueditorFormDesignRef" />
      </TabPane>
      <TabPane key="2" tab="业务表单">
        <FormDesigner ref="formDesignRef" />
      </TabPane>
    </template>
    <TabPane key="2" tab="业务表单" v-if="formEditorType == 1">
      <FormDesigner ref="formDesignRef" />
    </TabPane>
    <TabPane key="3" tab="专业表单" v-if="formEditorType == 0">
      <UeditorFormDesigner ref="ueditorFormDesignRef" />
    </TabPane>
    <TabPane key="4" tab="表单属性">
      <FormManagementEdit />
    </TabPane>
    <TabPane key="5" tab="流程记录">
      <RecordList />
    </TabPane>
    <TabPane key="6" tab="模块管理" />
  </Tabs>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, onMounted, nextTick } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Tabs, TabPane, TabsProps } from 'ant-design-vue';
  import { FlowEdit, Writeback, EventDesign, NodeEdit, PathEdit } from './modules';
  import EditFlowChart from './modules/designViewFlowChart/index.vue';
  import { useRouter } from 'vue-router';
  import { useTitle } from '@vueuse/core';
  import { getAdminFlowEditNode, getAdminFlowGetWorkflowProps } from '/@/api/flowManage/flowManage';
  import { useFlowStore } from '/@/store/modules/flow';
  import FormDesigner from '/@/views/formDesigner/index.vue';
  import FormManagementEdit from '/@/views/system/workflow/formManagement/FormManagementEdit.vue';
  import UeditorFormDesigner from '/@/views/ueditorFormDesigner/index.vue';
  import RecordList from '/@/views/system/workflow/flowRecord/index.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { getToken } from '/@/utils/auth';

  export default defineComponent({
    name: 'DesignViewPage',
    components: {
      Tabs,
      TabPane,
      FlowEdit,
      Writeback,
      EventDesign,
      EditFlowChart,
      NodeEdit,
      PathEdit,
      FormDesigner,
      FormManagementEdit,
      UeditorFormDesigner,
      RecordList,
    },
    setup(_, { emit }) {
      const selectType = ref('rect');
      const { currentRoute } = useRouter();
      const editFlowChartRef = ref<HTMLElement>(null);
      const activeKey = ref('1');
      const { createMessage } = useMessage();
      const currentQuery: any = ref({});
      const dataRef = ref<Recordable>({});
      const tabSize = ref<TabsProps['size']>('small');
      const formDesignRef = ref<HTMLElement>(null);
      const ueditorFormDesignRef = ref<any>(null);
      const isWriteBackEnabled = ref(true);
      const userStore = useUserStore();
      const formEditorType = ref(
        userStore.serverInfo.formEditorType != undefined ? userStore.serverInfo.formEditorType : 0,
      );
      const { resolve } = useRouter();
      const oldActKey = ref('1');
      const actKey = ref('1');

      const fetch = async () => {
        try {
          // await nextTick();
          // editFlowChartRef.value.fetch();
          await getAdminFlowEditNode({ code: currentQuery.value.typeCode }).then((res) => {
            let result = res || {};
            if (result.children) delete result.children;

            dataRef.value = result;
          });
        } catch (err) {
          console.log(err);
        }
      };

      onMounted(() => {
        currentQuery.value = currentRoute.value?.query;
        useTitle(`${currentQuery.value.pageName}-${currentQuery.value.name}`);
        console.log('currentQuery.value', currentQuery.value);

        isWriteBackEnabled.value =
          userStore.serverInfo.isWriteBackEnabled != undefined
            ? userStore.serverInfo.isWriteBackEnabled
            : true;

        fetch();
      });

      const handleSelectItem = (type) => {
        console.log('type', type);
        activeKey.value = '2';
        selectType.value = type;
        console.log('selectType.value', selectType.value);
      };
      const isShow = ref(true);
      const useFlow = useFlowStore();
      //保存成功的回调
      const handleSuccess = async () => {
        // activeKey.value = '1';
        // isShow.value = false;
        // setTimeout(() => {
        //   isShow.value = true;
        // }, 100);
        const res = await getAdminFlowGetWorkflowProps({ typeCode: currentQuery.value.typeCode });
        if (typeof res === 'object') {
          useFlow.setFlowEdit(res);
        }
      };
      const handleTabChange = () => {};

      //切换tab
      function getActiveKey(key: number) {
        console.log('getActiveKey key', key);
        if (key == 2) {
          formDesignRef.value?.handleRefresh();
        } else if (key == 3) {
          ueditorFormDesignRef.value?.handleRefresh();
        } else if (key == 6) {
          let routeUrl: any = {};
          routeUrl = resolve({
            path: '/moduleSetup',
            query: {
              moduleCode: dataRef.value.formCode,
              formCode: dataRef.value.formCode,
              title: `${currentQuery.value.name}模块`,
              token: getToken() as any,
            },
          });
          const height = screen.height;
          const width = screen.width;
          window.open(
            routeUrl.href,
            '',
            `height=${height},width=${width},top=0, left=0,alwaysRaised=true,toolbar=no,location=no,resizable=no, scrollbars=yes ,`,
          );
          actKey.value = oldActKey.value;
        }

        oldActKey.value = '' + key;
      }

      return {
        editFlowChartRef,
        currentQuery,
        activeKey,
        dataRef,
        handleSelectItem,
        selectType,
        handleSuccess,
        isShow,
        handleTabChange,
        tabSize,
        getActiveKey,
        formDesignRef,
        ueditorFormDesignRef,
        formEditorType,
        isWriteBackEnabled,
        actKey,
      };
    },
  });
</script>
<style lang="less" scoped>
  // .full-modal {
  //   .ant-modal {
  //     max-width: 100%;
  //     top: 0;
  //     padding-bottom: 0;
  //     margin: 0;
  //   }
  //   .ant-modal-content {
  //     display: flex;
  //     flex-direction: column;
  //     height: calc(100vh);
  //   }
  //   .ant-modal-body {
  //     flex: 1;
  //   }
  // }

  .view-style {
    height: 100vh;
  }

  .flowDesignerTab {
    overflow: auto;
  }
</style>
<style lang="less">
  .flowDesignerTab > .ant-tabs-nav {
    margin: 0 !important;
  }
</style>
